<template>
    <div class="chooseBoard" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
        <div class="title">
            <div :class="languageStr==='English'?'content':'encontent'">
                <span>{{ languagePack.fourteen }}</span>
            </div>
            <div class="timer">
                <span>{{ time }}</span>
            </div>
            <div class="laugBox" @click="changeLaug" v-focusable>
                <div class="changeLau">
                    <img width="38px" v-if="languageStr==='简体中文'" src="~images/bigScreen/motorFactory/china.png" alt/>
                    <img width="38px" v-if="languageStr==='English'" src="~images/bigScreen/motorFactory/english.png"
                         alt/>
                    <span>{{ languageStr }}</span>
                </div>
            </div>
        </div>

        <div class="selectBtn">
            <div :class="item.point?'selectBg1':'selectBg2'"
                 v-for="(item,index) of selArr" :key="index"
                 v-focusable

                 @up="menuUp(index, $event)"
                 @down="menuDown(index, $event)"

                 @click="changePoint(item.id)"
                 @onFocus="changePoint(item.id)">
                <span v-if="languageStr==='English'">{{ item.nameCn }}</span>
                <span v-else>{{ item.nameEn }}</span>
            </div>
        </div>

        <div class="bigbox">
            <div class="secBox company">
                <div class="singleBox" v-for="(item,index) of urlData" :key="'url1'+index"
                     v-focusable

                     @right="companyRight(index, $event)"
                     @left="companyLeft(index, $event)"
                     @up="companyUp(index, $event)"
                     @onFocus="changeScreenPoint(item.id)"
                     @click="gobigScreen(item)">

                    <div class="topbox focusin">
                        <div class="itemfang">
                            <span :class="languageStr==='English'?'spanCn':'spanEn'">{{ languagePack.one }}</span>
                        </div>
                        <img src="~images/bigScreen/chooseBoard/companyScreen.png" alt/>
                    </div>

                    <div class="bottombox focusin">
                        <span class="titleName">{{ languageStr === 'English' ? item.titleCN : item.titleEN }}</span>
                        <span class="titleItem"></span>
                        <span>{{ languagePack.one }}：{{ item.companyName }}</span>
                    </div>
                </div>
            </div>

            <div class="secBox factory">
                <div class="singleBox" v-for="(item,index) of urlData1" :key="'url2'+index"
                     v-focusable

                     @right="factoryRight(index, $event)"
                     @left="factoryLeft(index, $event)"
                     @onFocus="changeScreenPoint(item.id)"
                     @click="gobigScreen(item)">

                    <div class="topbox focusin">
                        <div class="itemfang" :style="{background:'rgb(38,159,175)'}">
                            <span :class="languageStr==='English'?'spanCn':'spanEn'">{{ languagePack.two }}</span>
                        </div>
                        <img src="~images/bigScreen/chooseBoard/factoryScreen.png" alt/>
                    </div>
                    <div class="bottombox focusin">
                        <span class="titleName">{{ languageStr === 'English' ? item.titleCN : item.titleEN }}</span>
                        <span class="titleItem"><span>{{ languagePack.two }}：{{ item.floorName }}</span></span>
                        <span>{{ languagePack.one }}：{{ item.companyName }}</span>
                    </div>
                </div>
            </div>

            <div class="secBox line">
                <div class="singleBox" v-for="(item,index) of urlData2" :key="'url3'+index"
                     v-focusable

                     @right="lineRight(index, $event)"
                     @left="lineLeft(index, $event)"
                     @up="lineUp(index, $event)"
                     @down="lineDown(index, $event)"

                     @onFocus="changeScreenPoint(item.id)"
                     @click="gobigScreen(item)">

                    <div class="topbox focusin">
                        <div class="itemfang" :style="{background:'rgb(54,73,217)'}">
                            <span :class="languageStr==='English'?'spanCn':'spanEn'">{{ languagePack.three }}</span>
                        </div>
                        <img src="~images/bigScreen/chooseBoard/lineScreen.png" alt/>
                    </div>
                    <div class="bottombox focusin">
                        <span class="titleName">{{ languageStr === 'English' ? item.titleCN : item.titleEN }}</span>
                        <span
                            class="titleItem"><span>{{ languagePack.two }}：{{
                                item.floorName
                            }}</span><span>{{ languagePack.three }}：{{ item.areaName }}</span></span>
                        <span>{{ languagePack.one }}：{{ item.companyName }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "chooseBoard",
    components: {},
    data() {
        return {
            time: this.$moment(new Date()).format('HH:mm:ss 丨 YYYY/MM/DD'),
            scaleNum: '',
            selArr: [
                {id: 99, point: true, nameEn: 'All', nameCn: '全部', blur: {default: true}},
                {id: 1, point: false, nameEn: 'Company', nameCn: '公司'},
                {id: 2, point: false, nameEn: 'Factory', nameCn: '厂区'},
                {id: 3, point: false, nameEn: 'Line', nameCn: '产线'},
            ],
            chineseArr: {
                one: '公司',
                two: '厂区',
                three: '产线',
                fourteen: '选择展示看板',
            },
            englishArr: {
                one: 'Company',
                two: 'Factory',
                three: 'Line',
                fourteen: 'Select the display kanban',
            },
            languageStr: 'English',
            languagePack: {},
            urlData: [],
            urlData1: [],
            urlData2: [],
            languageShowF: false
        }
    },
    created() {
        this.$tv.findFocusType = 0;
    },
    mounted() {
        // this.timer1 = setInterval(this.refreshTime, 1000);
        // this.languagePack = this.chineseArr
        // this.onresize()
        // this.getList(99)
        // window.addEventListener('resize', this.onresize, false);
        // this.$service.move(this.$service.pointer)
    },
    activated() {
        const url = window.localStorage.getItem('mesJumpUrl')
        if (url && url != '') {
            let index = url.indexOf("?") == -1 ? url.length : url.indexOf("?");
            let result = url.substr(0, index);
            let index1 = url.indexOf("=");
            let query = {hierarchyCode: url.substr(index1 + 1, url.length), date: new Date().getTime()}
            this.$nextTick(() => {
                this.$router.push({path: result, query})
            })
        } else {
            this.timer1 = setInterval(this.refreshTime, 1000);
            this.languagePack = this.chineseArr
            this.onresize()
            this.getList(99)
            window.addEventListener('resize', this.onresize, false);
            this.$service.move(this.$service.pointer)
        }
    },
    methods: {
        menuUp(i, event) {
            this.$tv.requestFocus(
                this.$tv.getElementByPath(
                    `//div[@class="chooseBoard"]/div[1]/div[3]`
                ),
                false
            );
        },
        menuDown(i, event) {
            let index = this.selectType == 99 ? 1 : this.selectType;
            this.$tv.requestFocus(
                this.$tv.getElementByPath(
                    `//div[@class="bigbox"]/div[${index}]/div[1]`
                ),
                false
            );
        },
        companyLeft(index, event) {
            if (index === 0) {
                this.$tv.requestFocus(event.target);
            }
        },
        companyRight(index, event) {
            if (index === this.urlData.length - 1) {
                this.$tv.requestFocus(event.target);
            }
        },
        companyUp(index) {
            if (index < 6) {
                this.$tv.requestFocus(
                    this.$tv.getElementByPath(
                        `//div[@class='selectBtn']/div[1]`
                    ),
                    false
                );
            }
        },
        factoryLeft(index, event) {
            if (index === 0) {
                this.$tv.requestFocus(event.target);
            }
        },
        factoryRight(index, event) {
            if (index === this.urlData1.length - 1) {
                this.$tv.requestFocus(event.target);
            }
        },
        lineUp(index, event) {
            console.log(this.selectType);
            if (index < 6 && this.selectType === 3) {
                this.$tv.requestFocus(
                    this.$tv.getElementByPath(
                        `//div[@class='selectBtn']/div[4]`
                    ),
                    false
                );
            }
        },
        lineDown(index, event) {
            console.log(this.urlData2.length - index - 1 < 6);
            if((this.urlData2.length - index - 1) < 6){
                this.$tv.requestFocus(event.target);
            }
        },
        lineLeft(index, event) {
            if (index === 0) {
                this.$tv.requestFocus(event.target);
            }
        },
        lineRight(index, event) {
            if (index === this.urlData2.length - 1) {
                this.$tv.requestFocus(event.target);
            }
        },
        laugFocus() {
            this.languageShowF = true
            for (let item of this.urlData) {
                item.point = false
            }
            for (let item of this.urlData1) {
                item.point = false
            }
            for (let item of this.urlData2) {
                item.point = false
            }
        },
        gobigScreen(item) {
            window.localStorage.setItem('mesJumpUrl', item.url);
            let index = item.url.indexOf("?") == -1 ? item.url.length : item.url.indexOf("?");
            let result = item.url.substr(0, index);
            let index1 = item.url.indexOf("=");
            let query = {hierarchyCode: item.url.substr(index1 + 1, item.url.length), date: new Date().getTime()}
            this.$router.push({path: result, query})
        },
        changePoint(id) {
            this.languageShowF = false
            this.selectType = id;
            for (let item of this.selArr) {
                if (item.id === id) {
                    item.point = true
                    this.getList(id)

                } else {
                    item.point = false
                }
            }
        },
        changeScreenPoint(id) {
            this.languageShowF = false

        },
        //切换语言
        changeLaug() {
            if (this.languageStr === 'English') {
                this.languageStr = '简体中文'
                this.languagePack = this.englishArr
            } else {
                this.languageStr = 'English'
                this.languagePack = this.chineseArr
            }
        },
        //计算缩放
        onresize() {
            const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
            const scaleW = Width < 1920 ? (Width / 1920) : 1;
            const scaleH = Height < 1080 ? (Height / 1080) : 1;
            this.scaleNum = scaleW > scaleH ? scaleH : scaleW
        },
        //时间戳
        refreshTime() {
            this.time = this.$moment(new Date()).format('HH:mm:ss 丨 YYYY/MM/DD');
        },
        //
        getList(id) {
            this.axios({
                method: 'get',
                url: '/dms/large/screen/get',
                params: {
                    type: id,
                }
            }).then(res => {
                if (res.code === 200) {
                    this.urlData = res.data.filter(item => {
                        if (item.type === 1) {
                            return item
                        }
                    })
                    this.urlData1 = res.data.filter(item => {
                        if (item.type === 2) {
                            return item
                        }
                    })
                    this.urlData2 = res.data.filter(item => {
                        if (item.type === 3) {
                            return item
                        }
                    })
                }
            })
        },
    },
    beforeDestroy() {
        // clearInterval(this.timer1);
        // window.removeEventListener('resize', this.onresize, false);
    },
    deactivated() {
        clearInterval(this.timer1);
        window.removeEventListener('resize', this.onresize, false);
        //this.$service.move()
    },

}
</script>

<style scoped lang="scss">
.chooseBoard {
    background: url(~images/bigScreen/chooseBoard/bg.png) no-repeat;
    background-size: cover;
    height: 1080px;
    width: 1920px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;

    .title {
        background: url(~images/bigScreen/chooseBoard/header.png) no-repeat;
        background-size: cover;
        margin-top: 10px;
        height: 133px;
        width: 1889px;
        display: flex;
        justify-content: center;
        padding: 6px 0;

        .timer {
            position: absolute;
            right: 186px;
            top: 25px;
            font-size: 20px;
            color: #fff;
        }

        .laugBox {
            position: absolute;
            right: 16px;
            top: 6px;
            background: rgb(2, 25, 49);
            padding: 5px;
            cursor: pointer;

            .changeLau {
                background: url(~images/bigScreen/motorFactory/lauBox.png) no-repeat;
                background-size: cover;
                height: 37px;
                width: 120px;
                padding: 0 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    color: #fff;
                    font-size: 16px;
                }
            }
        }

        .content {
            font-size: 32px;
            font-weight: bold;
            line-height: 46px;
            letter-spacing: 8px;
            color: #fff;
            text-shadow: 1px 1px 1px #fff;
        }

        .encontent {
            font-size: 32px;
            font-weight: bold;
            line-height: 46px;
            color: #fff;
            text-shadow: 1px 1px 1px #fff;
        }
    }

    .selectBtn {
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .selectBg1 {
            background: url(~images/bigScreen/chooseBoard/titleborder.png) no-repeat;
            background-size: cover;
            height: 52px;
            width: 165px;
            margin: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                font-size: 22px;
                color: #fff;
            }
        }

        .selectBg2 {
            background: url(~images/bigScreen/chooseBoard/titleborder1.png) no-repeat;
            background-size: cover;
            height: 52px;
            width: 165px;
            margin: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                font-size: 22px;
                color: rgb(75, 128, 205);

            }
        }
    }

    .bigbox {
        height: 870px;
        width: 100%;
        padding: 0 20px;
        overflow: scroll;

        &::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .secBox {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;

            .singleBox {
                background: url(~images/bigScreen/chooseBoard/bigscreen.png) no-repeat;
                background-size: cover;
                height: 276px;
                width: 312px;
                padding: 22px;
                cursor: pointer;

                .topbox {
                    width: 100%;
                    height: 140px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    border: 2px solid rgba(255, 255, 255, 0);
                    border-bottom: 0px;

                    img {
                        height: 90%;
                    }

                    .itemfang {
                        position: absolute;
                        top: 10px;
                        right: 0%;
                        width: 80px;
                        height: 30px;
                        background: rgb(58, 141, 254);
                        border-radius: 60px 0 0 60px;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .spanEn {
                            font-size: 14px;
                            color: #fff;
                            text-align: center;
                        }

                        .spanCn {
                            font-size: 18px;
                            color: #fff;
                            text-align: center;
                        }
                    }
                }

                .bottombox {
                    width: 100%;
                    height: 90px;
                    border: 2px solid rgba(255, 255, 255, 0);
                    border-top: 0px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-content: space-between;
                    padding: 10px 20px;

                    span {
                        color: rgb(204, 225, 237);
                    }

                    .titleName {
                        // text-shadow: 1px 1px 1px #fff;
                        font-size: 12px;
                        color: #fff;
                    }

                    .titleItem {
                        display: flex;
                        justify-content: space-between;
                    }

                }
            }
        }
    }

}

</style>
<style lang="scss">

.chooseBoard {

    .focus .focusin {
        border-color: rgb(107, 229, 247) !important;
    }

    .focus .changeLau {
        border-color: rgb(107, 229, 247) !important;
    }

    .ivu-modal-content {
        background-color: rgba(30, 67, 116, 0.5);
    }

    .ivu-modal-footer {
        border-top: 0px;
    }

    .modalContent {
        height: 200px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
            font-size: 20px;
            padding: 10px 0;
            color: #fff;
        }
    }

    .modalBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

        .modalfooter {
            width: 50px;
            height: 40px;
            // border: 1px solid #fff;
        }
    }

}

</style>
